<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css" >
	<link rel="stylesheet" type="text/css"  href="../../css/themes/default.css" id="skin-switcher" >
	<link rel="stylesheet" type="text/css"  href="../../css/responsive.css" >

	<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">

	<!-- SELECT2 -->
	<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
	<!-- UNIFORM -->
	<link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
	<!-- datatable -->
	<link rel="stylesheet" href="../../js/datatables/datatable.css">
	<!-- FONTS
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
</head>
<body>
<header class="navbar clearfix" id="header">
</header>

<!-- PAGE -->
<section id="page">
	<!-- SIDEBAR -->
	<div id="sidebar" class="sidebar">
		<div class="sidebar-menu nav-collapse">

			<!-- SIDEBAR MENU -->
			<ul>

			</ul>
			<!-- /SIDEBAR MENU -->
		</div>

	</div>
	<!-- /SIDEBAR -->
	<div id="main-content">

		<div class="container">
			<div class="row">
				<div id="content" class="col-lg-12">
					<!-- PAGE HEADER-->
					<div class="row">
						<div class="col-sm-12">
							<div class="page-header">
								<!-- STYLER -->

								<!-- /STYLER -->
								<!-- BREADCRUMBS -->
								<ul class="breadcrumb">
									<li>
										<i class="fa fa-home"></i>
										<a href="index.html">首页</a>
									</li>
									<li>
										<a href="#">优惠券</a>
									</li>
									<li>优惠券明细</li>
								</ul>
								<!-- /BREADCRUMBS -->

							</div>
						</div>
					</div>
					<!-- /PAGE HEADER -->
					<!-- FORMS QUERY-->
					<div class="row">
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-12">
									<div class="box border primary">
										<div class="box-title">
											<h4><i class="fa fa-bars"></i>查询条件</h4>
										</div>
										<div class="box-body big" style="padding:10px;">
											<form class="form-horizontal" role="form">
												<div class="form-group mrg-bt10">
													<label class="col-sm-1 control-label" style="width: auto">优惠劵名称：</label>
													<div class="col-sm-2">
														<input type="text" class="form-control" name="q" placeholder="输入关键字">
													</div>

													<label class="col-sm-1 control-label" style="width: auto">用户名：</label>
													<div class="col-sm-2">
														<input type="text" class="form-control" name="userName" placeholder="输入关键字">
													</div>

													<label class="col-sm-1 control-label" for="e1" style="width: auto">状态：</label>
													<div class="col-sm-2">
														<select id="useStatus" class="col-md-12 select2-offscreen" tabindex="-1">
															<option value=-1>选择状态</option>
															<option value="UnReceived">未领取</option>
															<option value="Received">已领取</option>
															<option value="Used">已使用</option>
														</select>
													</div>
													<div class="col-sm-1">
														<a class="btn btn-primary search">查询</a>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /FORMS QUERY -->
					<div class="row">
						<!-- TABLES -->
						<div class="col-md-12">
							<!-- BOX -->
							<div class="box border primary">
								<div class="box-title">
									<h4><i class="fa fa-table"></i>列表</h4>

								</div>
								<div class="box-body">
									<table id="db_coupon_detail_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

									</table>
								</div>
							</div>
							<!-- /BOX -->
						</div>
					</div>
					<!-- /TABLES -->


					<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
					</div>
				</div><!-- /CONTENT-->
			</div>
		</div>
	</div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>


<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>

<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>
	var CouponDetail=function(){
		var  $mainDataTable=null;
		var searchCouponDetail=function(){
			var q=$("input[name=q]").val();
			var status=$("#useStatus").val();
			var userName = $("[name=userName]").val();
			var url=App.getContextPath()+"admin/coupon/searchCouponDetail.do?&q="+q;
			if(status!=-1&&status!=null){
				url+="&pStatus="+status;
			}
			
				url+="&userName="+userName;
			
			if($mainDataTable){
				$mainDataTable.api().ajax.url(url).load();
				return;
			}
			var dtSetting = $.dataTableSetting({
				"ajaxSource" :url,
				"serverSide" : true,
				"bFilter" : false,// 去掉搜索框
				"bLengthChange" : true,// 每页显示数量
				"sScrollX":"100%",
				"sScrollXInner": "100%",
				"iDisplayLength": 25,

				"bSort" : false,
				"aoColumns" : [ {
					"mDataProp" : "id",
					"sTitle" : "明细ID",
					"width" : "10%"
				}, {
					"mDataProp" : "couponBatchId",
					"sTitle" : "优惠劵批次"	,
					"width" : "6%"
				}, {
					"mDataProp" : "coupon.couponTitle",
					"sTitle" : "优惠劵名称"	,
					"width" : "18%",
					"render":function(data, type, row){
						return row.coupon.couponTitle;
					}

				}, {
					"sTitle" : "优惠劵号",
					"mDataProp" : "couponCode",
					"width" : "10%"
				}
					, {
						"mDataProp" : "faceValue",
						"sTitle" : "面值 ",
						"width" : "10%",
						"class":"format_thousands"
					}
					, {
						"mDataProp" : "userId",
						"sTitle" : "领取用户ID",
						"width" : "10%"

					}, {
						"mDataProp" : "leadTime",
						"sTitle" : "领取日期",
						"width" : "12%",
						"render":function(data, type, row){
							if(row.leadTime!=null)
								return $.getLocalTime(row.leadTime);
							return "";
						}
					}, {
						"sTitle" : "有效期 ",
						"width" : "16%",
						"render":function(data, type, row){
							return $.getLocalDate(row.startDate)+"至"+$.getLocalDate(row.endDate);
						}
					}, {

                        "sTitle" : "状态",
                        "width" : "12%",
                        "render":function(data, type, row){
                            if(row.useStatus=="Received")return "已领取";
                            if(row.useStatus=="UnReceived")return "未领取";
                            if(row.useStatus=="Used")return "已使用";


                        }
                    }, {

                        "sTitle" : "操作",
                        "width" : "6%",
                        "render":function(data, type, row){
                            if (row.useStatus === "Received") {
                                return '<a class="btn btn-danger btn-xs btn-width btn-del" detail_id="' + row.id + '"><i class="fa fa-arrow-circle-o-up"></i>删除</a>';
							}
                        }
                    }]
			});

			$mainDataTable = $("#db_coupon_detail_list").dataTable(dtSetting);
		};

		var deleteCouponDetail = function() {
            var id = $(this).attr("detail_id");
            $.confirm('确认删除该明细？', function(){
                $.post(App.getContextPath() + "admin/coupon/deleteCouponDetailById.do?id=" + id, function(result){
                    if (result.type !== 'success') {
                        $.alert(result.content);
                    } else {
                        searchCouponDetail();
                    }
                })
            })
        }

		return {

			init:function(){

				$("[name=q]").val($.getUrlParam("q"));
				$("#useStatus").select2({placeholder: "选择状态"});

				$(".search").click(searchCouponDetail);

				searchCouponDetail();

                $("#db_coupon_detail_list").on("click",".btn-del", deleteCouponDetail);
            }
		}
	}();

	$(function(){
		$("#header").load("../head.html");
		App.init(); //Initialise plugins and elements
		CouponDetail.init();

	});
</script>
<!-- /JAVASCRIPTS -->
</body>
</html>